<template>
  <div class="register">
    <navbar :title='$route.meta.title' />
    <div class="form">
      <p>
        <i class="iconfont icon-yonghuming"></i>
        <input
          placeholder="用户名"
          name="uname"
          ref="uname"
          v-model="reginfo.uname"
        > <span></span>
      </p>
      <p>
        <i class="iconfont icon-shoujihao"></i>
        <input
          placeholder="手机号"
          name="uphone"
          ref="uphone"
          v-model="reginfo.uphone"
        ><span></span>
      </p>
      <p>
        <i class="iconfont icon-mima"></i>
        <input
          placeholder="密码"
          type="password"
          name="upwd"
          ref="upwd"
          v-model="reginfo.upwd"
        ><span></span>
      </p>
      <p>
        <i class="iconfont icon-mima"></i>
        <input
          placeholder="确认密码"
          type="password"
          name="comupwd"
          ref="comupwd"
          v-model="reginfo.comupwd"
        ><span></span>
      </p>
      <div class="agree">
        <van-checkbox v-model="checked">同意《用户服务协议》</van-checkbox>
      </div>
      <p>
        <van-button
          type="primary"
          block
          color="#0079FE"
          @click="regSucc"
        >注册</van-button>
      </p>
      <p class="option">
        <span>已有帐号？<span
            class="log"
            @click="goLog"
          >去登录</span></span>
      </p>
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant'
import navbar from '../../components/Navtab'
export default {
  components: {
    navbar
  },
  data: () => ({
    unameFlag: false,
    upwdFlag: false,
    uphoneFlag: false,
    checked: true,
    reginfo: {
      uname: '',
      upwd: '',
      comupwd: '',
      uphone: ''
    }
  }),
  methods: {
    goLog() {
      this.$router.push('/login')
    },
    async regSucc(reginfo) {
      console.log(reginfo)
      const res = await this.$http.regPost(reginfo)
      console.log(res)
      Toast('注册成功!')
      this.$router.push('/login')
    }
  }
}
</script>
<style lang="scss" scoped>
.register {
  .form {
    width: 80%;
    margin: 20px auto;
    .agree {
      margin-bottom: 10px;
    }
    p {
      width: 100%;
      height: 15px;
      margin-bottom: 10px;
      border: 1px solid #e4e4e4;
      position: relative;
      input {
        width: 80%;
        height: 100%;
        border: none;
        text-indent: 4px;
      }
      i {
        font-size: 10px;
        margin-left: 3px;
        position: relative;
        top: 2px;
      }
    }
    .option {
      border: none;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
  }
}
</style>
